<template>
    <div class="premiumStaging">
      <div class="items" v-if="step===1">
        <div class="input-item">
          <label><span>*</span>承保公司</label>
          <input type="text" name="insurance_company" v-model="formData.insurance_company" placeholder="请输入公司名称"/>
        </div>
        <div class="input-item">
          <label><span>*</span>商业险总保费</label>
          <input type="number" name="commercial_insurance_amount" v-model="formData.commercial_insurance_amount" placeholder="请输入金额"/>
        </div>
        <div class="input-item">
          <label>交强险总保费</label>
          <input type="number" name="compulsory_insurance_amount" v-model="formData.compulsory_insurance_amount" placeholder="请输入金额"/>
        </div>
        <div class="input-item">
          <label><span>*</span>分期数</label>
          <input type="number" name="monthly_salary" disabled v-model="formData.periods" placeholder="请输入分期数"/>
        </div>
        <div class="input-item">
          <label><span>*</span>起保日期</label>
          <span @click="openPicker" style="color:#999;">{{formData.begin_time ? formData.begin_time:'请选择日期' }}</span>
        </div>
        <div class="input-item">
          <label>车船税</label>
          <input type="number" name="car_ship_tax" v-model="formData.car_ship_tax" placeholder="请输入金额"/>
        </div>
        <div class="input-item">
          <label><span>*</span>被保人姓名</label>
          <input type="text" name="name" v-model="formData.name" placeholder="请输入姓名"/>
        </div>
        <button class="btn" :disabled="!isSubmit" :class="{'es':isSubmit}" @click="step=2">下一步</button>
      </div>
      <template v-else>
        <div class="top">
          <div>
            <div class="sfz">
              <div v-if="!formData.driving_face">
                <span>+</span>
                <Qiniu is-url="true" className="driving_face" isShort="true" @upload="upload" prop="driving_face"></Qiniu>
              </div>
              <div v-else>
                <img :src="formData.driving_face_img" alt="">
                <i class="iconfont icon-x" @click="formData.driving_face=''"></i>
              </div>
            </div>
            <div class="sfz">
              <div v-if="!formData.driving_back">
                <span>+</span>
                <Qiniu is-url="true" className="driving_face"  isShort="true" @upload="upload" prop="driving_back"></Qiniu>
              </div>
              <div v-else>
                <img :src="formData.driving_back_img" alt="">
                <i class="iconfont icon-x" @click="formData.driving_back=''"></i>
              </div>
            </div>
          </div>
          <p><span>*</span>上传行驶证双面</p>
          <div class="input-item">
            <label>车牌号</label>
            <input type="text" name="car_IdNumber" v-model="formData.car_IdNumber" placeholder="请输入车牌号"/>
          </div>
          <div class="input-item">
            <label>车辆识别码</label>
            <input type="text" name="car_code" v-model="formData.car_code" placeholder="请输入识别码"/>
          </div>
        </div>
        <div class="car-item">
          <div class="sfz">
            <div v-if="!formData.insurance_policy">
              <span>+</span>
              <Qiniu is-url="true" className="insurance_policy"  isShort="true" @upload="upload" prop="insurance_policy"></Qiniu>
            </div>
            <div v-else>
              <img :src="formData.insurance_policy_img" alt="">
              <i class="iconfont icon-x" @click="formData.insurance_policy=''"></i>
            </div>
          </div>
          <p><span>*</span>上传车辆投保单</p>
        </div>
        <div class="car-item">
          <div class="sfz">
            <div v-if="!formData.payment_instructions">
              <span>+</span>
              <Qiniu is-url="true" className="payment_instructions"  isShort="true" @upload="upload" prop="payment_instructions"></Qiniu>
            </div>
            <div v-else>
              <img :src="formData.payment_instructions_img" alt="">
              <i class="iconfont icon-x" @click="formData.payment_instructions=''"></i>
            </div>
          </div>
          <p>上传缴费通知书</p>
        </div>
        <div class="isAccept">
          <input type="checkbox" id="accept" hidden v-model="isAccept"><i :class="{'is-checked':isAccept}"></i><label
          for="accept">我接受</label><span @click="toUploadPact" style="cursor: pointer;">《居间服务协议、业务确认函、保证金协议书》</span>
        </div>
        <button class="complete" :disabled="!isSubmit2" :class="{'es':isSubmit2}" @click="submit">完成</button>
      </template>
      
      <mt-datetime-picker
        ref="picker"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        @confirm="confirm">
      </mt-datetime-picker>
    </div>
</template>

<script>
  import Qiniu from './../common/Qiniu'

  export default {
        name: "PremiumStaging",
      data(){
          return {
            step:1,
            isAccept:false,
            pickerVisible:true,
            startDate:new Date(),
            formData:{
              insurance_company:'',
              commercial_insurance_amount:'',
              compulsory_insurance_amount:'',
              periods:'',
              car_ship_tax:'',
              begin_time:'',
              name:'',
              driving_face:'',
              driving_back:'',
              car_code:'',
              car_IdNumber:'',
              payment_instructions:'',
              insurance_policy:'',
              products_id:'',
              file_type:'',
            },
          }
      },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      if(this.step===1){
        next();
      }else {
        if(to.fullPath.indexOf('login')!=-1 || to.fullPath.indexOf('uploadpact')!=-1 || to.fullPath.indexOf('LoanAnnal')!=-1  ){
          next()
        }else {
          this.step -= 1;
          next(false)
        }
      }
    },
    components:{
      Qiniu
    },
    computed:{
      isSubmit() {
        return this.formData.insurance_company && this.formData.commercial_insurance_amount  && this.formData.begin_time && this.formData.begin_time && this.formData.name
      },
      isSubmit2(){
        return   this.formData.driving_face && this.formData.driving_back && this.formData.insurance_policy
      }
    },
      mounted() {
          let bffq = localStorage.getItem('bffq');
          if(bffq){
            this.formData = JSON.parse(bffq);
            this.step = 2;
            localStorage.removeItem('bffq');
          }
        this.formData.periods = this.$route.query.periods || 11;
      },
      methods:{
        toUploadPact(){
          this.$router.push('/uploadpact');
          localStorage.setItem('bffq',JSON.stringify(this.formData))
        },
        confirm(value){
          let date = new Date(value);
          this.formData.begin_time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        },
        openPicker() {
          this.$refs.picker.open();
        },
        upload(value,prop,fileName){
          if(!fileName){
            this.formData[prop] = value;
          }else {
            this.formData[prop] = fileName;
            this.formData[prop+'_img'] = value;
          }
        },
        submit(){
              if(!this.isAccept){
                 this.$toast('请先接受协议');
                return;
              }
              let params = this.$route.query;
              this.formData.products_id = params.productId;
              this.formData.file_type = params.fileType || 4;
              this.$indicator.open();
              this.$api.uploadInsuranceCost(this.formData).then((res)=>{
                this.$indicator.close();
                this.$toast({
                  message: '操作成功',
                  iconClass: 'iconfont icon-success',
                });
                this.$router.push('/LoanAnnal')
              }).catch((err)=>{
                this.$indicator.close();
                this.$msg(err,this.$toast);
              })
            }
      }
    }
</script>

<style lang="scss" scoped>
  .premiumStaging{
    background: #FAFAFA;
    width: 100%;
    height: 100%;
    position: relative;
    .items{
      padding: 0 30px;
      background: #fff;
      .btn{
        position: absolute;
        left: 30px;
        bottom:30px;
        background: #DDDDDD;
        &.es{
          background: #E71F18;
        }
      }
    }
    .sfz{
      padding: 60px 0 0.1px 0;
      >div{
        width:460px;
        min-height:260px;
        background:rgba(245,245,245,1);
        border-radius:2px;
        margin: 0 auto;
        position: relative;
        span{
          width:110px;
          height:110px;
          background:rgba(255,255,255,1);
          border-radius:50%;
          font-size: 60px;
          text-align: center;
          color:#E71F18;
          line-height: 110px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
        img{
          width: 100%;
        }
        .iconfont{
          font-size: 30px;
          line-height: 30px;
          background: #fff;
          color: #000;
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
        }
      }
      p{
        font-size:30px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:30px;
        margin: 30px 0;
        text-align: center;
      }
    }
    .top{
      background: #fff;
      padding: 0 30px;
      >p{
        span{
          color:#E71F18;
        }
        color: #333333;
        text-align: center;
        font-size:30px;
        font-weight:400;
        line-height:30px;
        margin: 29px 0 24px 0;
      }
     >div{
       width: 100%;
       display: flex;
       justify-content: space-between;
       .sfz{
         >div{
           width:340px;
           min-height:192px;
           /deep/ .qiniu{
             height: 192px;
           }
         }
       }
     }
    }
    .car-item{
      padding: 0 0 60px 0;
      margin: 20px 0 0 0;
      background: #fff;
      >p{
        span{
          color:#E71F18;
        }
        color: #333333;
        text-align: center;
        font-size:30px;
        font-weight:400;
        line-height:30px;
        margin: 30px 0 0px 0;
      }
    }
    .complete{
      width:690px;
      height:88px;
      border-radius:6px;
      display: block;
      font-size:36px;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin: 60px auto 30px auto;
      background: #DDDDDD;
      &.es{
        background:rgba(231,31,24,1);
      }
    }
    /deep/ .qiniu{
      width: 100%;
      height: 260px;
      position: relative;
      z-index: 2;
    }
    /deep/ .qiniu label{
      width: 100%;
      height: 100%;
      font-size: 0;
      background: transparent;
    }
  }
</style>
